<template>
  <div>
    <el-row v-if="diskList.length">
      <el-col :span="6" v-for="(o, index) in diskList" class="mb10" :key="index" :offset="1">
        <el-card :body-style="{ padding: '0px' }">
          <el-badge :value="index+1" class="item" type="danger">
            <img src="@/assets/img/blue2.png" class="image">
          </el-badge>
          <div style="padding: 14px;">
            <span>編號：{{ o.facilityName }}</span>
            <p>
              <span>IMEI：{{ o.facilityNum }}</span>
            </p>
            <div class="bottom clearfix">
              <span class="green circle"></span>
              <span class="connect super">已連接</span>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-empty v-else description="暫未分配追蹤器,請聯繫管理員配置"></el-empty>
  </div>
</template>

<script>
export default {
  name: 'assets-card',

  model: {
    props: "value",
    event: "update",
  },

  props: {
    value: {
      default() {
        return ''
      },
    },
  },

  data() {
    return {
      diskList: []
    }
  },

  created() {
    this.getData()
  },

  methods: {
    getData() {
      this.$store.dispatch('assets/fetchListUserFacility').then(res => {
        //只顯示當前群組且關聯的設備 isOnline === 1
        this.diskList = res.filter(item => item.isOnline === 0)
        // console.log('获取设备列表')
        // console.log(this.diskList)
        this.$emit('update', this.diskList)
      }).catch(err => {
        console.error(err)
        this.$message.error(err)
      })
    }
  }
}
</script>

<style scoped lang="scss">
@import "../../../assets/css/them.scss";

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}

.clearfix:after {
    clear: both
}

.circle {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 1px solid $borderColor;
  border-radius: 50%;

  &.red {
    background-color: $disconnectColor;
  }

  &.green {
    background-color: $connectColor;
  }
}

.super {
  vertical-align: super;
  font-size: 13px;

  &.connect {
    color: $connectColor;
  }

  &.disconnect {
    color: #999;
  }
}

.el-card {
  overflow: visible;
}

.mb10 {
  margin-bottom: 10px;
}
</style>
